<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <title>学习寄语</title>
    
</head>
<body>
    <div id="app">
        <h2>个人信息</h2>
        <div class="item">
            姓名：<input type="text" :value="stu.name">
        </div>
        <div class="item">
            年龄：<input type="number" :value="stu.age">
        </div>
        <div class="item">
            身高：<input type="number" :value="stu.height":value="stu.height">
        </div>
        
        <!-- 文本框 -->
        <div v-if="stu.height>=180" class="item_icon">
            兄弟再有八块腹肌做猛lan吧
        </div>
        <div v-else-if="stu.height>=170" class="item_icon">
            该用功学习了，不然没对象了~
        </div>
        <div v-else-if="stu.height>=160" class="item_icon">
            兄弟咱身高一般但智商高啊！
        </div>
        <div v-else-if="stu.height<160 && stu.height!=''" class="item_icon">
         别理他们，咱浓缩的都是精华！
        </div>
        </div v-else class="item_icon">
         
        </div>
    
    </body>
    <style>
        #app{
            width: 300px;
            height: 320px;
            background-color: gainsboro;
            text-align: center;
            padding-top: 10px;
        }
        .item{
            width: 300px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .item_icon{
            width: 240px;
            height: 100px;
            background-color: white;
            line-height: 30px;
            margin-left: 30px;
            color: red;
        }

    </style>
        <script src="http://unpkg.com/vue@next"></script>
        <script>

            const Counter={
                data(){
                    return{
                        stu:{name:'小明',age:20,height:157}
                    }
                }
            }
            Vue.createApp(Counter).mount('#app')
            
            </script>

    </div>
    

</html>